<template>
<div class="box">
<div class="header">
<van-sticky>
<van-nav-bar title="分类" right-text=''>
  <van-icon name="arrow-left" slot="left" size='18' @click="gocartgory" />
  <van-icon name="search" slot="right" size='18' />
</van-nav-bar>
</van-sticky>
<ul class="headerul">
    <li class='priceli'>
    <ul>
      <li @click="pricesortup" v-if="flag">价格<van-icon name="arrow-up" /></li>
      <li @click="pricesortdown" v-else>价格 <van-icon name="arrow-down" /></li>
    </ul>
    </li>
    <li @click="ratingsort">评分</li>
    <li @click="salessort">销量</li>
    <li @click="toprolist"><van-icon name="qr" size="20" /></li>
</ul>
</div>

<div class="content">
<van-pull-refresh
  v-model="isLoading"
  success-text="刷新成功"
  @refresh="onRefresh"
>
<van-card
  v-for="(item,index) of branlist" :key="index"
  num="2"
  :price="item.price"
  :desc="item.detail"
  :title="item.proname"
  :thumb="item.proimg"
>
  <template #tags>
    <van-tag plain type="danger">评分：{{item.rating}}</van-tag>
    <van-tag plain type="danger">销量：{{item.sales}}</van-tag>
  </template>
  <template #footer>
    <van-button size="mini"><van-icon name="cart-o" size="20" /></van-button>
  </template>
</van-card>
</van-pull-refresh>
</div>
</div>
</template>
<script>
import Vue from 'vue'
import { Card, NavBar, Icon, Tag, Button, PullRefresh, Toast, Sticky } from 'vant'
import { getCategoryBrandlist } from '@/api'
Vue.use(Card)
Vue.use(NavBar)
Vue.use(Icon)
Vue.use(Tag)
Vue.use(Button)
Vue.use(PullRefresh)
Vue.use(Toast)
Vue.use(Sticky)
export default {
  data () {
    return {
      branlist: [],
      isLoading: false,
      price: [],
      flag: true,
      type: '',
      brand: ''
    }
  },
  mounted () {
    const { type, brand } = this.$route.query
    this.type = type
    this.brand = brand
    console.log(this.$router.query)
    getCategoryBrandlist({ type, brand }).then(res => {
      this.branlist = res.data.data
      console.log(res.data.data)
      this.branlist.forEach((item, index) => {
        this.price.push(item.price)
      })
      console.log(this.price)
    })
  },
  methods: {
    toprolist () {
      this.$router.push('/product?' + 'type=' + this.type + '&brand=' + this.brand)
    },
    gocartgory () {
      this.$router.go(-1)
    },
    onRefresh () {
      setTimeout(() => {
        Toast('刷新成功')
        this.isLoading = false
        const { type, brand } = this.$route.query
        getCategoryBrandlist({ type, brand }).then(res => {
          this.branlist = res.data.data
          console.log(this.branlist)
        })
      }, 1000)
    },
    pricesortup () {
      this.flag = false
      this.branlist.sort((a, b) => {
        return a.price - b.price
      })
    },
    pricesortdown () {
      this.flag = true
      this.branlist.sort((a, b) => {
        return b.price - a.price
      })
    },
    salessort () {
      this.branlist.sort((a, b) => {
        return b.sales - a.sales
      })
    },
    ratingsort () {
      this.branlist.sort((a, b) => {
        return b.rating - a.rating
      })
    }
  }
}
</script>
<style lang='scss'>
@import '@/lib/reset.scss';
.box{
  @include rect(100%,100%);
  @include flexbox();
  @include flex-direction(column);
  .header{
    // height: 12%;
    .headerul{
      li {
        line-height: 28px;
        margin-left: 40px;
        float: left;
      }
      .priceli{
        margin-left: 0px;
      }
    }
  }
  .content{
    overflow-y: auto;
    height: 100%;

  }
  body {
    background: #e5e5e5;
}
/* 瀑布流最外层 */
#root {
     margin: 0 auto;
     width: 100%;
   //   column-count: 2;
   //   column-width: 40%;
}
/* 每一列图片包含层 */
.item {
   width: 50%;
   margin-bottom: 10px;
    /* 防止多列布局，分页媒体和多区域上下文中的意外中断 */
   // break-inside: avoid;
   background: #fff;
   float: left;
}
.item:hover {
   //   box-shadow: 2px 2px 2px rgba(0, 0, 0, .5);
}
/* 图片 */
.itemImg {
   width: 100%;
   vertical-align: middle;
}
/* 图片下的信息包含层 */
.userInfo {
   padding: 5px 10px;
}
.avatar {
   vertical-align: middle;
   width: 100%;
   height: 100%;
   border-radius: 10%;
}
.username {
   display: inline-block;
   margin-left: 5px;
   width: 90%;
   font-size: 9px;
   overflow: hidden;
   text-overflow:ellipsis;
   white-space: nowrap;
   //   text-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
}
}
</style>
